/* Table 表格类型声明 */
// https://element-plus.gitee.io/zh-CN/component/table.html#table-属性

import { IElButton } from '@/base-ui/button/types'

export interface IElTable {
  data?: any[] // 显示的数据
  height?: string | number // Table 的高度， 默认为自动高度
  maxHeight?: string | number // Table 的最大高度
  stripe?: boolean // 是否为斑马纹 table - false
  border?: boolean // 是否带有纵向边框 - false
  size?: 'large' | 'default' | 'small' // Table 的尺寸
  fit?: boolean // 列的宽度是否自撑开 - true
  showHeader?: boolean // 是否显示表头 - true
  highlightCurrentRow?: boolean // 是否要高亮当前行 - false
  currentRowKey?: string | number // 当前行的 key，只写属性
  rowClassName?: string | any // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
  rowStyle?: object | any // 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style
  cellClassName?: string | any // 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
  cellStyle?: object | any // 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
  headerRowClassName?: string | any // 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
  headerRowStyle?: object | any // 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。
  headerCellClassName?: string | any // 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
  headerCellStyle?: object | any // 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
  rowKey?: string | any // 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
  emptyText?: string // 空数据时显示的文本内容， 也可以通过 #empty 设置 - No Data
  defaultExpandAll?: boolean // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 - false
  expandRowKeys?: any[] // 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组
  defaultSort?: {
    // 默认的排序列的 prop 和顺序
    prop: string // prop 属性指定默认的排序的列
    order: 'ascending' | 'descending' // order 指定默认排序的顺序
  }
  tooltipEffect?: 'dark' | 'light' // tooltip effect 属性 - dark
  showSummary?: boolean // 是否在表尾显示合计行 - false
  sumText?: string // 合计行第一列的文本 - 合计
  selectOnIndeterminate?: boolean // 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。 若为 true，则选中所有行；若为 false，则取消选择所有行 - true
  indent?: number // 展示树形数据时，树节点的缩进 - 16
  lazy?: boolean // 是否懒加载子节点数据
  treeProps?: {
    // 渲染嵌套数据的配置选项
    hasChildren: 'hasChildren'
    children: 'children'
  }
  tableLayout?: 'fixed' | 'auto' // 设置表格单元、行和列的布局方式 - fixed
  scrollbarAlwaysOn?: boolean // 总是显示滚动条 - false
  flexible?: boolean // 确保主轴的最小尺寸 - false
}

// Table-column 表格项属性类型
// https://element-plus.gitee.io/zh-CN/component/table.html#table-column-属性
type TVertical = 'left' | 'center' | 'right'
export interface IElTableColumn {
  type?: 'selection' | 'index' | 'expand' // 对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
  index?: number | any // 如果设置了 type=index，可以通过传递 index 属性来自定义索引
  label?: string // column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
  columnKey?: string // column 的 key， column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件
  prop?: string // 字段名称 对应列内容的字段名， 也可以使用 property属性
  width?: string | number // 对应列的宽度
  minWidth?: string | number // 对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
  fixed?: true | 'left' | 'right' // 列是否固定在左侧或者右侧。 true 表示固定在左侧
  sortable?: boolean | 'true' | 'false' | 'custom' // 对应列是否可以排序， 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 - false
  sortBy?: string | any[] | any // 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推
  sortOrders?: ['ascending' | 'descending' | null] // 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。 需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序
  resizable?: boolean // 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） - true
  showOverflowTooltip?: boolean // 当内容过长被隐藏时显示 tooltip - false
  align?: TVertical // 对齐方式 - left
  headerAlign?: TVertical // 表头对齐方式， 若不设置该项，则使用表格的对齐方式
  className?: string // 列的 className
  labelClassName?: string // 当前列标题的自定义类名
  reserveSelection?: boolean // 仅对  type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效。 - false
  filters?: [{ text: string; value: any }] // 数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
  filterPlacement?: string // 过滤弹出框的定位 与 Tooltip 的 placement 属性相同
  filterMultiple?: boolean // 数据过滤的选项是否多选 - true
  filteredValue?: any[] // 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。
}

// 继承合并IElTableColumn接口类型
export interface ITableColumn extends IElTableColumn {
  // 自定义tableColumn属性
  icon?: string // 图标名
  iconStyle?: object // 图标大小
  editable?: boolean // 是否可编辑
  action?: boolean // 是否有操作项
  actionAttrs?: IElButton // 操作项按钮整体配置
  hidden?: boolean // 是否隐藏表格项
}

// 确认类型
export type TTableConfirm = 'add' | 'edit'
